<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
    <title>${webName}-${webTitle}</title>
    <meta name="keywords" content="${meta_keys!}">
    <meta name="description" content="${meta_desc!}">
    <% include("../layout/headercss.html"){} %>
    <link rel="stylesheet" href="${version('/static/theme/detail.css')}">
    <% if(article.articleType == 2 ){ %>
    <script src="https://cdn.staticfile.org/mermaid/8.13.5/mermaid.min.js"></script>
    <% } %>
</head>
<body>
<% include("../layout/header.html"){} %>
<div class=" container vc-container page-position vc-page">
    <i class="fa fa-map-marker"></i>
    <span>当前位置：</span>
    <a href="/">首页</a>
    <span>&gt;</span>
    <a href="/article/t/${article.topicId}.html">${article.topicName}</a>
    <span> > 正文</span>
</div>
<div class="container vc-container">
    <div class="header_content">
        <!--content-->
        <div class="main animated fadeIn mb-20">
            <div class="article">
                <h2 class="single-title">
                    ${article.title}
                </h2>
                <div class="article-info">
                    <% if(article.sourceType == 1) { %>
                    <div class="article-info-inline">
                        <svg class="icon desc-icon" aria-hidden="true">
                            <use xlink:href="#icon-user"></use>
                        </svg>
                        <span>${article.createName}</span>
                    </div>
                    <div class="article-info-inline">
                        <svg class="icon desc-icon" aria-hidden="true">
                            <use xlink:href="#icon-time"></use>
                        </svg>
                        <span>${article.updateTime,dateFormat="yyyy-MM-dd HH:mm"}</span>
                    </div>
                    <% } else { %>
                    <div class="article-info-source">
                        <div><span class="span">本文转载于${article.sourceName}</span></div>
                        <div>
                            <span class="span">来源：</span>
                            <a href="${article.sourceUrl}" class="span-a" target="_blank">${article.sourceUrl}</a>
                        </div>
                    </div>
                    <% } %>
                    <% if(isNotEmpty(article.articleLabelVos)){ %>
                    <div class="article-info-inline">
                        <% for(vo in article.articleLabelVos){ %>
                        <a href="/article/tag/${vo.id}.html" class="article-tag article-tag-${voLP.index % 3}">${vo.name}</a>
                        <% } %>
                    </div>
                    <% } %>
                </div>
                <div class="article-content">
                    ${article.contentMdView}
                </div>
            </div>
            <div class="article-comment">
                <%if(login){ %>
                <textarea class="form-control" id="comment" rows="6" ></textarea>
                <div class="action-box">
                    <button type="button" class="btn btn-primary btn-save" id="save-comment">发表评论</button>
                </div>
                <% } else { %>
                <textarea class="form-control"  rows="6" disabled placeholder="请登录后发表评论"></textarea>
                <div class="action-box">
                    <button type="button" class="btn btn-primary btn-save-disabled">发表评论</button>
                </div>
                <% } %>
                <div id="article-comment-main"></div>
            </div>
        </div>
        <!--right-->
        <aside>
            <div class="mb-20"><% include("../fragment/hotList.html"){} %></div>
            <div class="mb-20"><% include("../fragment/topicBlockList.html"){} %></div>
            <div class="mb-20"><% include("../fragment/adModule.html"){} %></div>
            <div class=""><% include("../fragment/labelList.html"){} %></div>
        </aside>
        <div class="tool-bar">
            <div class="tool-bar-item" id="btn-tool-comment">
                <div  class="tool-bar-pic">
                    <svg class="icon tool-bar-icon" aria-hidden="true">
                        <use xlink:href="#icon-pinglunxiao"></use>
                    </svg>
                </div>
                <span>评论</span>
            </div>
        </div>
    </div>
</div>
<% include("../layout/footer.html"){} %>
<script>
    const comment = {};
    $(function () {
        if('${article.articleType}' === '2' ){
            mermaid.initialize({
                startOnLoad:true,
                htmlLabels: 'code'
            });
        }
        $("#save-comment").on("click",function () {
            comment.save();
        });
        comment.loadData();
        $("#btn-tool-comment").on("click",function () {
            window.scrollTo(0, document.body.scrollHeight);
        });
    })
    comment.save = function () {
        $.ajax({
            url: '/comment/save',
            type: 'post',
            dataType: 'json',
            contentType: "application/json;charset=utf-8",
            data: JSON.stringify({
                'articleId': '${article.id}',
                "content": $("#comment").val()
            }),
            success:function (res) {
                if (res.ok) {
                    comment.loadData();
                }
            }
        })
    };
    comment.loadData = function () {
        $.ajax({
            url: '/comment/list/${article.id}',
            type: 'get',
            dataType: 'json',
            success:function (res) {
                if (res.ok) {
                    var data = res.data;
                    var html = '';
                    for (var i in data) {
                        html +='<div class="article-comment-item"><div class="article-comment-head"><div class="header-warp">';
                        if (data[i].avatar) {
                            html += '<img class="avatar" src=" '+data[i].avatar+' " />';
                        }
                        if (data[i].userName) {
                            html += '<div class="author">'+data[i].userName+'</div>';
                        } else {
                            html += '<div class="author">匿名</div>';
                        }
                        html += '</div><div class="time">'+data[i].createTime+'</div></div>';
                        html += '<div class="article-comment-body">'+data[i].content+'</div></div>';
                    }
                    $("#article-comment-main").html(html);
                }
            }

        })
    }
</script>
</body>
</html>
